<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <style>

        header{ background-color: #ededed; }
        header ul li { height: 50px; line-height: 50px; text-align: left; display: none; color: #323237; position: relative;font-size: 16px;text-indent: 10px;}
        header ul li.active{ display: block; }
        #footer{  background-color: #f7f7f7; }
        #footer ul li{ position:relative;  padding-top: 30px; padding-bottom: 4px; background: url() no-repeat center 8px; background-size: auto 19px; text-align: center; font-size: 11px;font-weight: normal;}
        #footer ul li.active{ color: #08c161; }
        #footer ul li:nth-child(1){ background-image: url(./image/bottombtn0101.png); }
        #footer ul li:nth-child(2){ background-image: url(./image/bottombtn0201.png); }
        #footer ul li:nth-child(3){ background-image: url(./image/bottombtn0301.png); }
        #footer ul li:nth-child(4){ background-image: url(./image/bottombtn0401.png); }
        #footer ul li:nth-child(1).active{ background-image: url(./image/bottombtn0102.png); }
        #footer ul li:nth-child(2).active{ background-image: url(./image/bottombtn0202.png); }
        #footer ul li:nth-child(3).active{ background-image: url(./image/bottombtn0302.png); }
        #footer ul li:nth-child(4).active{ background-image: url(./image/bottombtn0402.png); }
        .flex-con{
          overflow: auto
        }
      li  i{display:block;
background:#f00;border-radius:50%;width:15px;height:15px;top:0px; position:absolute;color: #ffffff;font-style:normal;left:50%;font-size: 11px;
        }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" style="background-color:#ededed;">
    <header>
        <ul style="float: left;">
            <li class="border-b active" id="wds"></li>
            <li class="border-b" >通讯录</li>
            <li class="border-b" ></li>
            <li class="border-b" ></li>
        </ul>
        <div id="ss" onclick="search()" tapmode ><img src="image/ss.png" height="40" ></div>
    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >微信<i id="wd">5</i></li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >通讯录</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >发现</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >我</li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>

<script type="text/javascript">


function search( ){

  api.openWin({
      name: 'search',
      animation:{
        type:"fade",                //动画类型（详见动画类型常量）
        subType:"from_right",       //动画子类型（详见动画子类型常量）
        duration:300                //动画过渡时间，默认300毫秒
        },
      url: './html/searchwin.html',

  });
  api.clearCache();

}

function weidu(n){
    $api.html($api.byId('wds'), "微信("+n+")" );
      $api.html($api.byId('wd'),n );
}


    apiready = function () {

  localStorage.setItem('domain',"http://103.229.183.126/");

        $api.fixStatusBar( $api.dom('header') );
       footer.style.paddingBottom = api.safeArea.bottom + 'px';

        funIniGroup();

wd= Math.floor(Math.random()*10)+1 ;



localStorage.setItem('wd',wd);

    }

    function funIniGroup(){
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
        for (var i = 0,len = eHeaderLis.length; i < len; i++) {
                frames.push( {
                    name: 'frame'+i,
                    url: './html/frame'+i+'.html',
                    bgColor : 'rgba(0,0,0,.2)',
                    bounces:true
                } )
        }


        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            background:'#ededed',
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight
            },
            index: 0,
            scrollEnabled:false,
            frames: frames
        }, function (ret, err) {

        });
    }

    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $api.dom('#footer li.active') )return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
            }else{
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls( eFootLis[index], 'active');
        $api.addCls( eHeaderLis[index], 'active');

        if(index==3){
          api.setFrameGroupAttr({
              name: 'group',
            rect: {
                x: 0,
                y:0,
                w: 'auto',
                h: $api.dom('#main').offsetHeight+$api.dom('header').offsetHeight
            },
        });
        }else{
          api.setFrameGroupAttr({
              name: 'group',
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight
            },
 });
        }
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });


    }
</script>
